<template>
  <Sidebar ref="sidebar" :title="t('baseStyle.associativeLineStyle')">
    <div class="sidebarContent" :class="{ isDark }">
      <div class="title noTop">{{ t('baseStyle.associativeLine') }}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{ t('baseStyle.associativeLineColor') }}</span>

          <el-popover  width="270" placement="bottom" trigger="click">
            <template #refeence>
              <span
                class="block"
                :style="{ backgroundColor: style.associativeLineColor }"
              ></span>
            </template>
            <Color
              :color="style.associativeLineColor"
              @change="
                color => {
                  update('associativeLineColor', color)
                }
              "
            ></Color>
          </el-popover>
        </div>
        <div class="rowItem">
          <span class="name">{{ t('baseStyle.associativeLineWidth') }}</span>
          <el-select
            size="small"
            style="width: 80px"
            v-model="style.associativeLineWidth"
            placeholder=""
            @change="
              value => {
                update('associativeLineWidth', value)
              }
            "
          >
            <el-option
              v-for="item in lineWidthList"
              :key="item"
              :label="item"
              :value="item"
            >
              <span
                v-if="item > 0"
                class="borderLine"
                :class="{ isDark }"
                :style="{ height: item + 'px' }"
              ></span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{
            t('baseStyle.associativeLineActiveColor')
          }}</span>
         
          <el-popover  widt="270" placement="bottom" trigger="click">
            <template #refeence>
              <span
                class="block"
                :style="{ backgroundColor: style.associativeLineActiveColor }"
              ></span>
            </template>
            <Color
              :color="style.associativeLineActiveColor"
              @change="
                color => {
                  update('associativeLineActiveColor', color)
                }
              "
            ></Color>
          </el-popover>
        </div>
        <div class="rowItem">
          <span class="name">{{
            t('baseStyle.associativeLineActiveWidth')
          }}</span>
          <el-select
            size="small"
            style="width: 80px"
            v-model="style.associativeLineActiveWidth"
            placeholder=""
            @change="
              value => {
                update('associativeLineActiveWidth', value)
              }
            "
          >
            <el-option
              v-for="item in lineWidthList"
              :key="item"
              :label="item"
              :value="item"
            >
              <span
                v-if="item > 0"
                class="borderLine"
                :class="{ isDark }"
                :style="{ height: item + 'px' }"
              ></span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{ t('style.style') }}</span>
          <el-select
            size="small"
            style="width: 80px"
            v-model="style.associativeLineDasharray"
            placeholder=""
            @change="
              value => {
                update('associativeLineDasharray', value)
              }
            "
          >
            <el-option
              v-for="item in borderDasharrayListComputed"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
              <svg width="120" height="34">
                <line
                  x1="10"
                  y1="17"
                  x2="110"
                  y2="17"
                  stroke-width="2"
                  :stroke="
                    style.associativeLineDasharray === item.value
                      ? '#409eff'
                      : isDark
                      ? '#fff'
                      : '#000'
                  "
                  :stroke-dasharray="item.value"
                ></line>
              </svg>
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 关联线文�?-->
      <div class="title noTop">{{ t('baseStyle.associativeLineText') }}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{ t('baseStyle.fontFamily') }}</span>
          <el-select
            size="small"
            v-model="style.associativeLineTextFontFamily"
            placeholder=""
            @change="update('associativeLineTextFontFamily', $event)"
          >
            <el-option
              v-for="item in fontFamilyListComputed"
              :key="item.value"
              :label="item.name"
              :value="item.value"
              :style="{ fontFamily: item.value }"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{ t('baseStyle.color') }}</span>
          <el-popover  width="270" placement="bottom" trigger="click">
            <template #refeence>
              <span
                class="block"
                :style="{ backgroundColor: style.associativeLineTextColor }"
              ></span>
            </template>
            <Color
              :color="style.associativeLineTextColor"
              @change="
                color => {
                  update('associativeLineTextColor', color)
                }
              "
            ></Color>
          </el-popover>
        </div>
        <div class="rowItem">
          <span class="name">{{ t('baseStyle.fontSize') }}</span>
          <el-select
            size="small"
            style="width: 80px"
            v-model="style.associativeLineTextFontSize"
            placeholder=""
            @change="update('associativeLineTextFontSize', $event)"
          >
            <el-option
              v-for="item in fontSizeList"
              :key="item"
              :label="item"
              :value="item"
              :style="{ fontSize: item + 'px' }"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </Sidebar>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, defineProps } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/stores'
import Sidebar from './Sidebar.vue'
import Color from './Color.vue'
import {
  lineWidthList,
  fontFamilyList,
  fontSizeList,
  borderDasharrayList
} from '@/config'

const defaultStyle = {
  associativeLineColor: '',
  associativeLineWidth: 0,
  associativeLineActiveWidth: 0,
  associativeLineDasharray: '',
  associativeLineActiveColor: '',
  associativeLineTextFontSize: 0,
  associativeLineTextColor: '',
  associativeLineTextFontFamily: ''
}

// Props
const props = defineProps({
  mindMap: {
    type: Object
  }
})

// Composables
const { t, locale } = useI18n()
const store = useMainStore()
const { activeSidebar, isDark } = storeToRefs(store)

// Refs
const sidebar = ref(null)

// Reactive data
const activeLineNode = ref(null)
const activeLineToNode = ref(null)
const style = reactive({
  ...defaultStyle
})

// Computed
const fontFamilyListComputed = computed(() => {
  return fontFamilyList[locale.value] || fontFamilyList.zh
})

const borderDasharrayListComputed = computed(() => {
  return borderDasharrayList[locale.value] || borderDasharrayList.zh
})

// Watchers
watch(activeSidebar, (val) => {
  if (val === 'associativeLineStyle') {
    sidebar.value.show = true
  } else {
    sidebar.value.show = false
  }
})

// Methods
const onAssociativeLineClick = (a, b, node, toNode) => {
  activeLineNode.value = node
  activeLineToNode.value = toNode
  const styleConfig = props.mindMap.associativeLine.getStyleConfig(
    node,
    toNode
  )
  Object.keys(style).forEach(item => {
    style[item] = styleConfig[item]
  })
  store.setActiveSidebar('associativeLineStyle')
}

const associativeLineDeactivate = () => {
  if (activeSidebar.value === 'associativeLineStyle') {
    store.setActiveSidebar(null)
  }
  activeLineNode.value = null
  activeLineToNode.value = null
  Object.assign(style, { ...defaultStyle })
}

const update = (prop, value) => {
  style[prop] = value
  const associativeLineStyle =
    activeLineNode.value.getData('associativeLineStyle') || {}
  const toNodeUid = activeLineToNode.value.getData('uid')
  const lineStyle = associativeLineStyle[toNodeUid] || {}
  activeLineNode.value.setData({
    associativeLineStyle: {
      ...associativeLineStyle,
      [toNodeUid]: {
        ...lineStyle,
        ...style
      }
    }
  })
  props.mindMap.associativeLine.updateActiveLineStyle()
}

// Lifecycle hooks
onMounted(() => {
  props.mindMap.on('associative_line_click', onAssociativeLineClick)
  props.mindMap.on(
    'associative_line_deactivate',
    associativeLineDeactivate
  )
})

onBeforeUnmount(() => {
  props.mindMap.off('associative_line_click', onAssociativeLineClick)
  props.mindMap.off(
    'associative_line_deactivate',
    associativeLineDeactivate
  )
})
</script>

<style lang="less" scoped>
.sidebarContent {
  padding: 20px;
  padding-top: 10px;

  &.isDark {
    .title {
      color: #fff;
    }

    .row {
      .rowItem {
        .name {
          color: hsla(0, 0%, 100%, 0.6);
        }
      }
    }
  }

  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(26, 26, 26, 0.9);
    margin-bottom: 10px;
    margin-top: 20px;

    &.noTop {
      margin-top: 0;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .rowItem {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      .name {
        font-size: 12px;
        margin-right: 10px;
        white-space: nowrap;
      }

      .block {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}

.borderLine {
  display: inline-block;
  width: 100%;
  background-color: #000;

  &.isDark {
    background-color: #fff;
  }
}
</style>
<style lang="less">
.el-select-dropdown__item.selected {
  .borderLine {
    background-color: #409eff;
  }
}
</style>
